<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <link rel="stylesheet" href="indect1.css">

</head>

<body>

   <header>

    <div class="header-metu-div">

        <div class="header-top-div clearfix">

            <nav class="">

                <ul>

                    <li class="nav-ul-li fr"><a class="" href="">请先登入|</a></li>

                    <li class="nav-ul-li fr"><a href="">免费注册|</a></li>

                    <li class="nav-ul-li fr"><a href="">我的订单|</a></li>

                    <li class="nav-ul-li fr"><a href="">会员中心|</a></li>

                    <li class="nav-ul-li fr"><a href="">帮助中心|</a></li>

                    <li class="nav-ul-li fr"><a href="">关于我们|</a></li>

                    <li class="nav-ul-li fr"><a href="">手机版</a></li>

   

                </ul>

            </nav>

        </div>

    </div>

   

    <div class="header-bottom-div">

        <div class="bottom-div">

            <img src="./images/LOGO.PNG" alt="" height="80px" style="float: left;">

            <nav>

                <ul>

                    <li class="nav-ul-li ma1 fl "><a href="">首页</a>

                            <div class="bottom-container"></div>

                    </li>

                    <li class="nav-ul-li ma1 fl"><a href="">居家</a></li>

                    <li class="nav-ul-li ma1 fl"><a href="">美食</a></li>

                    <li class="nav-ul-li ma1 fl"><a href="">服饰</a></li>

                    <li class="nav-ul-li ma1 fl"><a href="">母婴</a></li>

                    <li class="nav-ul-li ma1 fl"><a href="">个护</a></li>

                    <li class="nav-ul-li ma1 fl"><a href="">严选</a></li>

                    <li class="nav-ul-li ma1 fl"><a href="">数码</a></li>

                    <li class="nav-ul-li ma1 fl"><a href="">运动</a></li>

                    <li class="nav-ul-li ma1 fl"><a href="">杂项</a></li>

                </ul>

            </nav>

            <input type="text" class="fl ma2">    

        </div>

       

    </div>

   </header>

   <section>

    <div class="section-div">

        <div class="list-div">

            <nav >

                <ul >

                    <li class="li-block">居家 茶咖酒具 水具杯壶</li>

                    <li class="li-block">美食 网易黑猪 水产海鲜</li>

                    <li class="li-block">服饰 室外拖鞋 春夏潮鞋</li>

                    <li class="li-block">母婴 T恤/polp/衬衫 卫衣/毛衫</li>

                    <li class="li-block">个护 家庭清洁 浴室用品</li>

                    <li class="li-block">严选 卫浴用品 高级珠宝</li>

                    <li class="li-block">数码 影音娱乐 乐器</li>

                    <li class="li-block">运动 登机箱 托运箱</li>

                    <li class="li-block">杂项 乐器杂项</li>

                    <li class="li-block">品牌 品牌推荐</li>

                </ul>

            </nav>

        </div>

        <img src="" alt="">

    </div>

   </section>  

   <article>

    <div style="height:900px clearfix">

        <div class="item-div clearfix">

            <div class="item-titl">

                <h1 class="fl">新鲜好物 </h1>

                <p class="fl">新鲜出炉 品质靠谱</p>

                <p class="fr ma1"><a href="">查看全部</a></p>

            </div>

            <ul class="item-ul">

                <li class="item-ul-li">

                    <img src="./images/new_goods_1.jpg" alt="">

                    <p>睿米无线吸尘器</p>

                    <p>￥23215220119王子斐</p>

                </li>

                <li class="item-ul-li">

                    <img src="./images/new_goods_2.jpg" alt="">

                    <p>智能空调</p>

                    <p>￥1299</p>

                </li>

                <li class="item-ul-li">

                    <img src="./images/new_goods_3.jpg" alt="">

                    <p>煲仔饭</p>

                    <p>￥12.00</p>

                </li>

                <li class="item-ul-li">

                    <img src="./images/new_goods_4.jpg" alt="">

                    <p>机械手表</p>

                    <p>￥1200</p>

                </li>

            </ul>

            <div class="item-titl">

                <h1 class="fl">人气推荐 </h1>

                <p class="fl">人气爆款 不容错过</p>

                <p class="fr ma1"><a href=""></a></p>

            </div>

            <ul class="item-ul">

                <li class="item-ul-li">

                    <img src="./static/img/reco1.jpg" alt="">

                    <p>特惠推荐</p>

                    <p>它们最实惠</p>

                </li>

                <li class="item-ul-li">

                    <img src="./static/img/reco2.jpg" alt="">

                    <p>爆款推荐</p>

                    <p>它们最欢迎</p>

                </li>

                <li class="item-ul-li">

                    <img src="./static/img/reco3.jpg" alt="">

                    <p>一站买全</p>

                    <p>使用场景下精心挑选</p>

                </li>

                <li class="item-ul-li">

                    <img src="./static/img/reco4.jpg" alt="">

                    <p>领卷中心</p>

                    <p>更多超值优惠卷</p>

                </li>

            </ul>

                <div class="item-titl  chearfix">

                    <h1 class="fl">热门品牌 </h1>

                    <p class="fl">国际经典 品质保证</p>

                    <p class="fr ma1"><a href=""></a></p>

                </div>

                <ul class="item-ul">

                    <li class="item-ul-li">

                        <img src="./static/img/hotImg/hot1.jpg" alt="">

                        <p></p>

                        <p></p>

                    </li>

                    <li class="item-ul-li">

                        <img src="./static/img/hotImg/hot2.jpg" alt="">

                        <p></p>

                        <p></p>

                    </li>

                    <li class="item-ul-li">

                        <img src="./static/img/hotImg/hot3.jpg" alt="">

                       <p></p>

                       <p></p>

                    </li>

                    <li class="item-ul-li">

                        <img src="./static/img/hotImg/hot10.jpg" alt="">

                        <p></p>

                        <p></p>

                    </li>

                </ul>

           
                <div class="dl">
                    <dd class="qrcode">
                        <img src="./images/qrcode.png">
                    </dd>
                </div>
             
        </div>

    </div>

    </div>

   </article>

  <section class="chearfix">


    <div class="dl">
        <dd class="qrcode">
            <img src="./images/ORcode.png">
        </dd>
    </div>
 





</body>

</html>
<style>
    body{

margin: 0;

}

.header-top-div{

height: 52px;

width: 1270px;

background:rgb(59, 57, 57);

margin: 0 auto;

}

.header-top-div>nav>ul>li>a{

color: aliceblue;

}

.header-bottom-div>div>nav>ul>li>a{

color: black;

}

.clearfix{

content: "";

display: table;

clear: both;

}

a{

text-decoration: none;

}

.header-metu-div{

height: 52px;

}

.header-bottom-div{

height: 80px;

text-align: center;

}

.bottom-div{

font-size: 0;

height: 52px;

width: 1270px;

display: inline-block;

position: relative;



}

.bottom-div>nav{

font-size: 20px;

}

.nav-ul-li{



display: block;



padding-right: 10px;



}

.nav-ul-li>a{

display: block;

}

.nav-ul-li>a:hover+.bottom-container{

color: red;

display: block;

position:absolute;

}

.bottom-container{

width:200px;

height: 200px;

background-color: red;

display: none;

}

.bottom-container:hover{

display: block;

position: absolute;

}

.fr{

float: right;

}

.fl{

float: left;

}

.ma1{

padding:0 20px 0;

}

.section-div{

height: 500px;

width: 1270px;

background-color: aqua;

margin: 0 auto;

font-size: 0;



}

.list-div{

background-image: url(./images/logo.png.png) ;

background-repeat:no-repeat;

background-size: cover;

}

.list-div>nav>ul{

height: 500px;

width: 20%;

background-color: rgb(81, 85, 81);

}

.li-block{



display: block;





padding: 15px 20px;

font-size: 16px;

color: aliceblue;

}

.item-div{

width: 1270px;

height: 1300px;

margin: 0 auto;

font-size: 0;

}

.item-div::after,.item-div::before{

content: "";

display: table;

}

.item-titl{

font-size: 16px;

height: 80px;

}

.item-ul-li{

font-size: 16px;

display: inline-block;

text-align: center;

padding: 3px;

}

.item-ul{

padding: 0;



}

.item-ul-li>img{

width: 310px;

}




.chearfix::after,.chearfix::before{

content: "";

display: table;

clear: both;

}

.container{

width: 1270px;

display: block;

margin: 0 auto;

}

.titl{

height: 80px;

}

.tag{

color: white;

position: absolute;

top: 50%;

width: 190px;



}

.tag-box-fl{



background-color: black;

line-height: 67px;

width: 77px;

}

.tag-box-fr{



background-color: gray;

line-height: 67px;

width: 113px;

}

.box{

position: relative;

height: 720px;

}

.box>img{

height: 720px;

width: 300px;

}

.box-nav>ul{

padding-left:40px ;

}

.box-ul-li{

padding: 10px;

width: 160px;

display: inline-block;



}

 .box-ul-li:not(:first-child){

padding-left: 65px;

}

.box-ul-li>img{

   

height: 160px;

}

.font-red{

color: red;



}

.pre-line{

height: 36px;

text-overflow: ellipsis;

}

.font-gray{

color: gray;

text-overflow: ellipsis;

}

.ellipsis{

white-space: nowrap;

overflow: hidden;

text-overflow: ellipsis;

} 
.xtx_footer .contact .qrcode {
    width: 90px;
    height: 85px;
    padding: 6px;
    border: 1px solid #ededed;
}
</style>

